// 基本信息
import { getAliSms } from "@/api/modules/notification";
import DialogBox from "@/components/DialogBox";
import { ElForm, ElTooltip } from "element-plus";
import { getCurrentInstance, defineComponent, PropType, ComponentInternalInstance } from "vue";
import "./mould-detail.scss";
interface DeviceForm {
	[key: string]: any;
}
export default defineComponent({
	props: {
		width: String,
		title: String,
		detail: {
			type: Object as PropType<DeviceForm>,
			default() {
				return {};
			}
		}
	},
	emits: ["submit"],
	setup(props, { emit, attrs }) {
		const { proxy } = getCurrentInstance() as ComponentInternalInstance;
		type FormInstance = InstanceType<typeof ElForm>;
		const formRef = ref<FormInstance>();
		const formRule = reactive({
			name: [{ required: true, message: proxy?.$t("notifymould.formrule.name"), trigger: "change" }],
			id: [{ required: true, message: proxy?.$t("notifymould.formrule.id"), trigger: "change" }]
		});
		const id = ref("");
		const validData = () => {
			formRef.value?.validate(valid => {
				if (valid) {
					emit("submit");
				}
			});
		};
		onMounted(async () => {
			let { result } = await getAliSms({ aliTemplate: true });
			if (result) {
				aliSmsList.value = result;
			}
		});
		const aliSmsList = ref([]);
		const changeMould = (val: any) => {
			if (val.constructor === Object) {
				props.detail.name = val.templateName;
				props.detail.content = val.templateContent;
				props.detail.id = val.templateCode;
				isMould.value = true;
			} else {
				props.detail.name = "";
				props.detail.content = "";
				props.detail.id = "";
				isMould.value = false;
			}
		};
		const isMould = ref(false);
		return () => {
			return (
				<DialogBox {...attrs} width={props.width} title={props.title} onConfirm={validData}>
					<el-form model={props.detail} ref={formRef} rules={formRule} label-width="100">
						<el-form-item label={proxy?.$t("notifymould.form_label.name")} prop="name">
							<el-input
								v-model={props.detail.name}
								placeholder={proxy?.$t("notifymould.placeholder.name")}
								disabled={isMould.value}
							/>
						</el-form-item>
						<el-form-item label={proxy?.$t("notifymould.form_label.type")} prop="type">
							<el-radio-group v-model={props.detail.type} disabled={!!props.detail.id}>
								<el-radio label="2">{proxy?.$t("notifymould.type_radio.mail")}</el-radio>
								<el-radio label="1">{proxy?.$t("notifymould.type_radio.sms")}</el-radio>
							</el-radio-group>
						</el-form-item>
						{props.detail.type == "1" && (
							<el-form-item label={proxy?.$t("notifymould.form_label.id")} prop="id">
								<el-select
									class="w-full"
									v-model={id.value}
									filterable
									default-first-option
									placeholder={proxy?.$t("notifymould.select.placeholder")}
									clearable
									value-key="templateCode"
									onChange={changeMould}
								>
									{aliSmsList.value.map((item: any) => {
										return <el-option key={item.templateCode} label={item.templateName} value={item}></el-option>;
									})}
								</el-select>
							</el-form-item>
						)}
						<el-form-item
							prop="content"
							v-slots={{
								label: () => {
									return (
										<div>
											{proxy?.$t("notifymould.form_label.content")}
											<ElTooltip
												raw-content
												v-slots={{
													content: () => {
														return (
															<div>
																<div class="title">{proxy?.$t("notifymould.tooltip.title")}</div>
																<hr />
																<el-form label-position="right" label-width="120px" class="tip">
																	<el-form-item label={proxy?.$t("notifymould.tool_label.devname")}>{"${devName}"}</el-form-item>
																	<el-form-item label={proxy?.$t("notifymould.tool_label.variable")}>
																		{"${variable}"}
																	</el-form-item>
																	<el-form-item label={proxy?.$t("notifymould.tool_label.varname")}>
																		{"${variableName}"}
																	</el-form-item>
																	<el-form-item label={proxy?.$t("notifymould.tool_label.currentval")}>
																		{"${currentVal}"}
																	</el-form-item>
																	<el-form-item label={proxy?.$t("notifymould.tool_label.type")}>{"${alarmType}"}</el-form-item>
																	<el-form-item label={proxy?.$t("notifymould.tool_label.level")}>{"${alarmLevel}"}</el-form-item>
																	<el-form-item label={proxy?.$t("notifymould.tool_label.time")}>{"${timestamp}"}</el-form-item>
																</el-form>
															</div>
														);
													}
												}}
											>
												<i class="iconfont iconhelp-circle pl-2 "></i>
											</ElTooltip>
										</div>
									);
								}
							}}
						>
							<el-input
								v-model={props.detail.content}
								type="textarea"
								rows="10"
								disabled={isMould.value}
								placeholder={proxy?.$t("notifymould.input.placeholder")}
							/>
						</el-form-item>
					</el-form>
				</DialogBox>
			);
		};
	}
});
